<template>
  <div>
    <el-dialog
      title="登录"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="455px"
    >
      <div class="login-box2">
        <el-form
          class="login-form"
          ref="form"
          :rules="rules"
          :model="form"
          label-width="0px"
        >
          <el-form-item label="" prop="name">
            <el-input class="" v-model="form.name" placeholder="用户名">
              <i slot="prefix" class="el-input__icon el-icon-user"></i>
            </el-input>
          </el-form-item>
          <el-form-item label="" prop="password">
            <el-input
              class=""
              v-model="form.password"
              :type="passw"
              placeholder="密码"
            >
              <i slot="prefix" class="el-input__icon el-icon-lock"></i>
              <i slot="suffix" :class="icon" @click="showPass"></i>
            </el-input>
          </el-form-item>
          <el-form-item prop="captcha" class="login-captcha">
            <el-input
              v-model="form.captcha"
              :placeholder="'验证码'"
              @keyup.enter.native="submitForm('form')"
            >
              <i slot="prefix" class="el-input__icon el-icon-key"></i>
            </el-input>
            <img :src="captchaBase64" @click="onCaptcha" />
          </el-form-item>
          <el-form-item style="margin-bottom: 0">
            <!-- <div class="elbtn" @click="submitForm('form')">登录</div> -->
            <el-button
              class="elbtn"
              type="primary"
              @click="submitForm('form')"
              :loading="loading"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
    <el-dialog
      title="修改密码"
      :visible.sync="changePasVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
      width="700px"
    >
      <Password :showNav="false" />
    </el-dialog>
  </div>
</template>

<script>
import BASE64 from "@/utils/base64.js";
var jwt = require("jsonwebtoken");
// import { RSAencrypt } from "@/utils/getRsaKey";
import { sm2encrypt } from "@/utils/smUtil";
import Password from "@/views/modules/Personal/child/password.vue";

export default {
  inject: ["reload"],
  data: () => ({
    loading: false,
    dialogVisible: false,
    form: {
      name: "",
      password: "",
      key: "",
      captcha: "",
    },
    rules: {
      name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
      password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      captcha: [{ required: true, message: "请输入验证码", trigger: "blur" }],
    },
    captchaBase64: "",
    //用于改变Input类型
    passw: "password",
    //用于更换Input中的图标
    icon: "icon icon-biyan",
    changePasVisible: false,
  }),
  computed: {
    username: {
      get: function () {
        return this.$store.state.username;
      },
      set: function (newValue) {
        this.$store.commit("setUsername", newValue);
      },
    },
  },
  components: {
    Password,
  },
  methods: {
    onCaptcha() {
      this.$get(this.$Url.account.captcha).then((res) => {
        const data = res.data;
        this.form.key = data.key;
        this.captchaBase64 = data.image;
      });
    },
    //密码的隐藏和显示
    showPass() {
      //点击图标是密码隐藏或显示
      if (this.passw == "text") {
        this.passw = "password";
        this.icon = "icon icon-biyan";
      } else {
        this.passw = "text";
        this.icon = "icon icon-zhengyan";
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.login();
        } else {
          return false;
        }
      });
    },
    getUserInfo(status) {
      this.$get(this.$Url.account.userInfo).then((res) => {
        const data = res.data;
        this.$cookie.set("realName", data.realName);
        localStorage.setItem("homeUserInfo", JSON.stringify(data));
        this.dialogVisible = false;
        if (status) {
          // this.$router.push({
          //   name: "personal",
          //   query: {
          //     type: 6,
          //     clear: true,
          //   },
          // });
          this.dialogVisible = false;
          this.changePasVisible = true;
        } else {
          this.$message({
            type: "success",
            message: "登录成功！",
          });
          this.reload();
        }
      });
    },
    login() {
      this.loading = true;
      this.$post(this.$Url.account.login, {
        username: sm2encrypt(this.form.name),
        userType: "DEFAULT",
        key: this.form.key,
        captcha: this.form.captcha,
        password: sm2encrypt(this.form.password),
      })
        .then((data) => {
          this.loading = false;
          if (data.code == 200) {
            const resData = data.data;
            this.$cookie.set("token", resData.access_token);
            setTimeout(() => {
              this.getUserInfo(false);
            }, 50);
          } else {
            this.onCaptcha();
            this.$message({
              type: "warning",
              message: data.msg,
            });
            if (data.code == 40312) {
              const resData = data.data;
              this.$cookie.set("token", resData.access_token);
              setTimeout(() => {
                this.getUserInfo(true);
              }, 50);
            }
          }
        })
        .catch((err) => {
          this.loading = false;
          this.onCaptcha();
        });
    },
  },
  mounted() {
    this.$Bus.$on("showLoginDialog", () => {
      this.dialogVisible = true;
      this.form.captcha = "";
      this.form.key = "";
      this.onCaptcha();
      this.$cookie.remove("realName");
      this.$cookie.remove("token");
    });
  },
};
</script>

<style lang="scss" scoped>
.hide {
  display: none;
}
.login-form {
  padding: 0 30px;
}
.elinput .el-input__inner {
  background-color: $mainColor;
}
.el-input__icon {
  color: $mainColor;
  font-size: 18px;
}
.icon {
  display: block;
  width: 25px;
  height: 25px;
  background-size: cover;
  margin-top: 6px;
}
.icon-zhengyan {
  background: url("../assets/img/home/icon-zhengyan.svg") no-repeat;
}
.icon-biyan {
  background: url("../assets/img/home/icon-biyan.svg") no-repeat;
}
.tools {
  position: relative;
  margin-top: 10px;
}
.tools span:nth-child(2) {
  float: right;
  text-decoration: underline;
  color: #9291a0;
  cursor: pointer;
}
.elbtn {
  width: 100%;
  line-height: 25px;
  border: 0;
  border-radius: 4px;
  margin-top: 10px;
  // text-align: center;
  // font-weight: 600;
  // font-size: 14px;
  color: #fff;
  background-color: $mainColor;
  &:hover {
    background-color: $mainColor;
  }
  // cursor: pointer;
}
.login-captcha {
  :deep(.el-input) {
    width: 190px;
  }
  img {
    width: 150px;
    height: 36px;
    margin: 0 0 0 10px;
    cursor: pointer;
  }
}
</style>
